<template>
	<view style="height: 100%">
		<!-- 搜索 -->
		<view class="search_input">
			<navigator url="#" open-type="navigate" class="navigator">
				<text class="iconfont icon-guanbi"></text>
			</navigator>
		</view>

		<!-- 轮播 -->
		<view id="banner">
			<swiper class="u-wrp-bnr" :indicator-dots="true" :autoplay="true" interval="7000" duration="1000"
				:circular="true">
				<block v-for="(item, index) in bnrUrl" :key="index">
					<swiper-item>
						<image :src="item.image" class="u-img-slide"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 分类导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<view class="scroll-tab-item" :class="{'active': tabIndex==0}" @tap="toggleTab(0)">
					全部
					<view class="scroll-tab-line"></view>
				</view>
				<block v-for="(item,index) in goodsType" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index+1}" @tap="toggleTab(index+1,item.id)">
						{{item.type}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 商品栏 -->
		<view class="commodity">
			<view class="list">
				<view class="list_item" v-for="(item,index) in goodsList"  @click="getGoods(item.id)">
					<image :src="imgSrc+item.picture" mode="aspectFill"></image>
					<text>{{item.theme}}</text>
					<text>{{item.goodsDescribe}}</text>
					<text>￥{{item.price}}</text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
			<view v-if="reachBottom" class="button_style">~ 到底啦 ~</view>
		</view>

	</view>
</template>

<script>
	import homeGoods from "@/api/homeGoods.js"
	//图片前缀路径
	//https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/
	
	export default {
		data() {
			return {
				// 轮播 图
				bnrUrl: [{
						image: 'https://img2.baidu.com/it/u=3580537224,3063762563&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=271'
					},
					{
						image: 'https://img0.baidu.com/it/u=4064843113,4240608435&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=206'
					},
					{
						image: 'https://img2.baidu.com/it/u=4070195968,3271113553&fm=253&fmt=auto&app=138&f=PNG?w=499&h=156'
					}
				],
				//选项卡，
				tabIndex: 0,
				//图片前缀路径
				imgSrc:"https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/",
				reachBottom: true,
				list: [1],
				//商品类型
				goodsType: [],
				//商品类型id
				typeId:"",
				//商品列表
				goodsList: [],
			}
		},
		onShow() {
			//页面加载完成之前查询商品类型
			this.getGoodsType()
			this.getGoodsList()
			// this.getGoodsById(3)
		},
		methods: {
			//跳转商品购买页面
			getGoods(id) {
				uni.navigateTo({
					url: "/pages/item/item?id="+id
				})
			},
			//查询商品类型
			getGoodsType() {
				homeGoods.goodsType().then(data => {
					// console.log(data)
					this.goodsType = data.data
					console.log(this.goodsType)
				})
			},
			//点击切换
			toggleTab(index,id) {
				this.tabIndex = index;
				console.log(index)
				if(index!=0){
					this.getGoodsById(id)
				}else{
					this.getGoodsList()
				}
				
			},
			//查询所有商品
			getGoodsList(){
				homeGoods.goodsList().then(data=>{
					// console.log(data.data.records)
					this.goodsList=data.data.records
					console.log(this.goodsList)
				})
			},
			//根据类型查询商品
			getGoodsById(typeId){
				// this.param.goodsTypeId=typeId
				homeGoods.goodsByTypeId(typeId).then(data=>{
					// console,log(data)
					this.goodsList=data.data.records
					// console,log(this.getGoods())
				})
			}
		},
		onLoad() {
			uni.setStorageSync("wximg",0)
		}

	}
</script>
<style>
	/* 搜索 */
	.search_input {
		height: 150rpx;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		border-radius: 0rpx 0rpx 50% 50%;
		background-color: #ff9224;
	}

	.search_input .navigator {
		width: 700rpx;
		/* background-color: #fff; */
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		color: #999;
		font-size: 24rpx;
		/* border: 1rpx solid rgb(192, 189, 189); */
	}

	/* 轮播 */
	#banner {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: -85rpx;
	}

	.u-wrp-bnr {
		width: 700rpx;
		height: 250rpx;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.u-img-slide {
		width: 100%;
		height: inherit;
		border-radius: 16rpx;
		overflow: hidden;
	}


	/* 分类 */
	.classification {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}

	.classification view {
		width: 300rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1rpx solid #ff9224;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 40rpx 0 40rpx 0;
		box-shadow: 4rpx 4rpx 5rpx rgba(0, 0, 0, 0.2);
	}

	.classification_btn {
		background-color: #797979;
		color: #fff;
	}

	/* 商品栏 */
	.commodity {
		margin-top: 5rpx;
	}

	.list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx;
	}

	.list_item {
		width: 44%;
		display: flex;
		flex-direction: column;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2);
		margin-bottom: 50rpx;
	}

	.list_item image {
		width: 100%;
		height: 200rpx;
	}

	.list_item text:nth-of-type(1) {
		margin: 5rpx 10rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.list_item text:nth-of-type(2) {
		margin: 0 10rpx 5rpx 10rpx;
		font-size: 20rpx;
		color: grey;
	}

	.list_item text:nth-of-type(3) {
		margin: 0 10rpx 5rpx 10rpx;
		color: red;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.list_item text:nth-of-type(4) {
		color: grey;
		font-size: 20rpx;
		text-align: right;
	}

	.no_data_style {
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		font-weight: bold;
		color: #2c2c2c;
	}

	.no_data_style image {
		width: 100rpx;
		margin-bottom: 20rpx;
	}

	.button_style {
		text-align: center;
		padding: 50rpx;
		font-size: 25rpx;
		font-weight: bold;
	}

	/* 分类导航 */

	.horizonal-tab .active {
		color: red;
	}

	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
	}

	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		font-size: 18px;
	}

	.active .scroll-tab-line {
		border-bottom: 5rpx solid red;
		border-top: 5rpx solid red;
		border-radius: 20rpx;
		width: 100%;

	}
</style>